<template>
   <div class="h-content">
            <div class="h-content2 w1180 clearfix">
                <ul class="fl h-nav">
                    <li :class="{hcurrent: index == i}" @click="index=i" v-for="(val, i) in mydata" :key="i"><a href="javascript:;">{{val.name}}</a></li>
                    <!-- <li><a href="javascript:;">联系我们</a></li> -->
                </ul>
                <div class="h-context fr">
                    <div class="h-about" :class="{hitem: index == i}" v-for="(val, i) in mydata" :key="i">
                        <h2>{{val.name}}</h2>
                        <p>{{val.content}}</p>
                    </div>
                    <!-- <div class="h-contact hitem">
                        <h2>联系我们</h2>
                        <p>{{list}}</p>
                    </div> -->
                </div>
            </div>
        </div>
</template>
<style less>
.w1180 {
    width: 1180px;
    margin: 0 auto;
}
.h-content {
    background-color: #f5f5f5;
}
.h-content2 {
    padding: 50px 0 60px 0;
}
.h-nav li {
    background-color: #212121;
    padding: 16px 68px;
    margin-bottom: 15px;
}
.h-nav .hcurrent {
    background-color: #85bc24;
    padding: 16px 68px;
    margin-bottom: 15px;
}
.h-nav li a {
    color: #fff;
    font-size: 16px;
}
.h-context {
    width: 930px;
    /* background-color: #eee; */
}
.h-context div {
    display: none;
}
.h-context .hitem {
    display: block;
}
.h-about,
.h-contact {
    padding: 0 18px;
    text-align: left;
}
.h-about h2,
.h-contact h2 {
    margin: 34px 0 5px;
    border-bottom: 1px solid #85bc24;
    color: #333;
    font-size: 30px;
}
.h-about p:nth-child(2),
.h-contact p:nth-child(2) {
    margin-top: 27px;
}
.h-about p,
.h-contact p {
    font-size: 16px;
    color: #000;
    line-height: 29px;
}
.h-pic {
    margin: 22px 0 30px;
}
.h-pic img {
    width: 891px;
    height: 505px;
}
</style>
<script setup>
import { getCurrentInstance, ref } from 'vue'
const list = ref(null)
const index = ref(0)
const { proxy } = getCurrentInstance()
const mydata = ref([{
    name: '关于我们',
    content: null
},
{
    name: '联系我们',
    content: null
}])
proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/about_get').then(val => {
    list.value = val.data.msg.content
    mydata.value[0].content = val.data.msg.content
})
proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/tel_get').then(val => {
    list.value = val.data.msg.content
    mydata.value[1].content = val.data.msg.content
    console.log(val)
})
</script>
